<!--
 * @Author: N0ts
 * @Date: 2022-11-18 11:35:55
 * @Description: 用户模块
 * @FilePath: /vue/src/components/setting/me.vue
 * @Mail：mail@n0ts.top
-->

<template>
    <div id="style">
        <div class="optionsBox" v-if="!data.saveData.gitee.giteeName">
            <p class="title">登陆 Gitee-码云</p>
            <p class="about">登陆来同步您的数据配置</p>
            <div class="operation"></div>
            <div class="btns">
                <el-button type="primary" @click="openAuthorization"
                    >前往授权</el-button
                >
            </div>
        </div>
        <div class="optionsBox" v-else>
            <p class="title">欢迎您！{{ data.saveData.gitee.giteeName }}</p>
            <img
                class="avatar"
                :src="data.saveData.gitee.giteeAvatar"
                :alt="data.saveData.gitee.giteeName"
            />
            <p class="about"></p>
            <div class="operation">
                <p>
                    我们会创建一个名为「IceCreamSearchData」的仓库用来存储您的数据
                </p>
                <p>改完任何设置记得来这里上传数据哦！</p>
            </div>
            <div class="btns">
                <div>
                    <el-button type="primary" @click="giteeUtil.checkRepos"
                        >创建仓库</el-button
                    >
                    <el-button type="primary" @click="giteeUtil.pushDataToGitee"
                        >上传数据</el-button
                    >
                    <el-button type="primary" @click="giteeUtil.pullDataToGitee"
                        >获取数据</el-button
                    >
                </div>
                <div>
                    <el-button type="primary" @click="giteeUtil.logout"
                        >注销</el-button
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import config from "@/config/config";
import data from "@/data/data";
import giteeUtil from "@/utils/giteeUtil";

/**
 * 打开授权页面
 */
function openAuthorization() {
    window.location.href = `https://gitee.com/oauth/authorize?client_id=${config.gitee.clientId}&redirect_uri=${config.gitee.redirectUri}&response_type=code&scope=${config.gitee.scope}`;
}
</script>

<style scoped lang="less">
.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
        rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
        rgba(0, 0, 0, 0.07) 0px 16px 16px;
    object-fit: cover;
}

.btns {
    > div {
        margin-bottom: 10px;
    }
}
</style>
